<template>
  <div class="paiwukou-dashboard">
    <!-- 水源地保护区概况 -->
    <!-- 水源地保护区概况 -->
    <el-card class="statistic-card" shadow="hover" :body-style="{ padding: '0px' }">
      <div slot="header" class="card-header">
        <h3 class="card-title">概况</h3>
      </div>
      <div class="overview-content">
        <div class="stat-item">
          <span class="stat-label">排污口总数：</span>
          <span class="stat-value">{{ rhoutFallNums }}</span>
          <span class="stat-unit">个</span>
        </div>
      </div>
    </el-card>

    <!-- 排污口类型统计 -->
    <el-card class="statistic-card" shadow="hover" :body-style="{ padding: '0px' }">
      <div slot="header" class="card-header">
        <h3 class="card-title">排污口类型统计</h3>
        <el-radio-group v-model="leibieType" size="mini" class="queryType" @change="handleLeibieChange">
          <el-radio-button label="2">大类</el-radio-button>
          <el-radio-button label="1">小类</el-radio-button>
        </el-radio-group>
      </div>
      <div class="chart-container">
        <div ref="paiwukouTypeChart" class="chart" :style="{ width: '100%', height: '250px' }"></div>
      </div>
    </el-card>

    <!-- 排污口分布 -->
    <el-card class="statistic-card" shadow="hover" :body-style="{ padding: '0px' }" style="margin-top: 10px;">
      <div slot="header" class="card-header">
        <h3 class="card-title">排污口分布</h3>
        <el-radio-group v-model="fenbuType" size="mini" class="queryType" @change="handleFenbuChange">
          <el-radio-button label="1">河流</el-radio-button>
          <el-radio-button label="2">区县</el-radio-button>
        </el-radio-group>
      </div>
      <div class="chart-container">
        <div ref="distributionChart" class="chart" :style="{ width: '100%', height: '250px' }"></div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getRuhepaiwukouGK, getRuhepaiwukouType, getRuhepaiwukouFb } from "../../api/paiwukou.js";
import * as echarts from 'echarts'



export default {
  name: 'PaiwukouDashboard',
  data() {
    return {
      leibieType: '2',
      fenbuType: '1',
      rhoutFallNums: '',
      paiwukouTypeChart: null,
      distributionChart: null
    }
  },
  mounted() {
    this.initData()
  },
  beforeDestroy() {
    this.disposeCharts()
  },
  methods: {
    // 初始化所有数据和图表
    initData() {
      this.getGaikuang()
      this.initPaiwukouTypeChart()
      this.initDistributionChart()
      this.getPaiwukouTypeData()
      this.getDistributionData()
    },
    
    // 清理图表资源
    disposeCharts() {
      this.paiwukouTypeChart?.dispose()
      this.distributionChart?.dispose()
    },
    
    // 获取概况数据
    getGaikuang() {
      getRuhepaiwukouGK().then(res => {
        let data = res.data
        this.rhoutFallNums = data.rhoutFallNums
      })
    },
    
    // 初始化排污口类型图表
    initPaiwukouTypeChart() {
      this.paiwukouTypeChart = echarts.init(this.$refs.paiwukouTypeChart)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          top: 'center',
          right: '5%',
          type: 'scroll',
          orient: 'vertical',
          height: '80%',
          formatter: function (name) {
            return name.length > 20 ? name.substring(0, 20) + '...' : name
          }
        },
        series: [
          {
            name: '排污口类型',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['20%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }
      this.paiwukouTypeChart.setOption(option)
    },
    
    // 初始化分布图表
    initDistributionChart() {
      this.distributionChart = echarts.init(this.$refs.distributionChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: []
      }
      this.distributionChart.setOption(option)
    },
    
    // 获取排污口类型数据
    getPaiwukouTypeData() {
      getRuhepaiwukouType({ type: this.leibieType }).then(res => {
        let data = res.data
        if (this.paiwukouTypeChart) {
          // 处理图表数据
          const chartData = data.map(item => ({
            value: item.nums,
            name: item.outfallName
          }))

          // 处理图例显示内容
          const legendData = data.map(item =>
            `${item.outfallName} ${item.nums}个 (${item.proportion}%)`
          )

          this.paiwukouTypeChart.setOption({
            legend: {
              data: legendData
            },
            series: [{
              data: chartData.map((item, index) => ({
                value: item.value,
                name: legendData[index]
              }))
            }]
          })
        }
      })
    },
    
    // 获取分布数据
    getDistributionData() {
      getRuhepaiwukouFb({ type: this.fenbuType }).then(res => {
        let data = res.data.dataList || []
        // 提取所有唯一的河流名称
        const rivers = [...new Set(data.flatMap(item =>
          item.valueList.map(val => val.name)))].sort()

        // 构建系列数据
        const series = data.map(item => {
          return {
            name: item.outfallTypeCodeName,
            type: 'bar',
            stack: '总量',
            barGap: 0,
            data: rivers.map(river => {
              const riverData = item.valueList.find(val => val.name === river)
              return riverData ? riverData.nums : 0
            })
          }
        })

        // 更新图表
        if (this.distributionChart) {
          this.distributionChart.setOption({
            xAxis: {
              data: rivers
            },
            series: series
          })
        }
      })
    },
    
    // 处理类别切换
    handleLeibieChange() {
      this.getPaiwukouTypeData()
    },
    
    // 处理分布切换
    handleFenbuChange() {
      this.getDistributionData()
    }
  }
}
// ... existing code ...
</script>


<style scoped>
.paiwukou-dashboard {
  background-color: #f5f7fa;
  min-width: 510px;
}

.card-header {
display: flex;
align-items: center;
height: 35px;
}
.el-card__header {
  padding: 5px !important;
}
.card-title {
font-size: 18px;
font-weight: bold;
color: #333;
}

.overview-content {
  padding: 20px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  margin-right: 5px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #409EFF;
}

.stat-unit {
  font-size: 14px;
  color: #606266;
  margin-left: 2px;
}

.chart-container {
  position: relative;
}

/* 响应式样式调整 */
@media (max-width: 768px) {
  .chart {
    height: 300px !important;
  }
}
</style>
